
 <template>
    <div class="home-cantainer scroller">
        <x-header title="Home首页"></x-header <load-more tip="default" :show-loading="false" background-color="#fbf9fe"></load-more>
        <div style="padding:0 15px;">
            <x-table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Apple</td>
                        <td>$1.25</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                        <td>$1.20</td>
                    </tr>
                </tbody>
            </x-table>
        </div>
        <div>
            <load-more tip="cell-bordered=false" :show-loading="false" background-color="#fbf9fe"></load-more>
            <x-table :cell-bordered="false" style="background-color:#fff;">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Apple</td>
                        <td>$1.25</td>
                        <td> x 1</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                        <td>$1.20</td>
                        <td> x 2</td>
                    </tr>
                </tbody>
            </x-table>

            <load-more tip="content-bordered=false" :show-loading="false" background-color="#fbf9fe"></load-more>

            <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
                <thead>
                    <tr style="background-color: #F7F7F7">
                        <th>Product</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Apple</td>
                        <td>$1.25</td>
                        <td> x 1</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                        <td>$1.20</td>
                        <td> x 2</td>
                    </tr>
                </tbody>
            </x-table>
        </div>
        <div style="padding:15px;">
            <load-more tip="full-bordered" :show-loading="false" background-color="#fbf9fe"></load-more>
            <x-table full-bordered style="background-color:#fff;">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Apple</td>
                        <td colspan="2">$1.25 x 10</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                        <td>$1.20</td>
                        <td>x 08</td>
                    </tr>
                </tbody>
            </x-table>
        </div>
        <router-link to="/home/comfirm" class="link"> 跳转到comfirm</router-link>

    </div>
</template>    

<script>
import { XTable, LoadMore, XHeader } from 'vux'

import { getScenicsList, getCoord } from "./../../common/api.js"

export default {
    components: {
        XTable,
        LoadMore,
        XHeader
    },
    computed: {

    },
    beforeCreate() {

    },
    created() {
        let _self = this;
        // console.log(getScenicsList({ajaxObj:_self.$http}),"getScenicsList")
        getScenicsList({
            ajaxObj: _self.$http
        }).then(res => {
            console.log(res, "res")
        }).catch(err => {

        }),
            getCoord().then(coords => {
                // console.log(res,"getCoord -- success")
                console.log(coords.latitude)

            }).catch(err => {
                // console.log(err,"getcoord - fail")
            })
    },
    beforeMounte() {

    },
    mounted() {


    },
    methods: {

    },
    watch: {

    }

}
</script>
<style lang="less" scoped>
.link {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    padding: 20px 40px;
}
</style>

